<template>
  <div class="alarmManage">
    <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="alarmList">
            <div class="tremBox" v-for="(item,index) in alertEventsList" v-bind:key="index" @click="viewDetail(index,item.imei,item.alertId,item.startDate)" :style="index==current?active:''">
              <div class="tremTitle">
                {{ item.monitorPointName }}
              </div>
              <div class="bot">
                <div class="lef">
                  <div>{{ item.startDate }}</div>
                  <div class="bot_t">{{ item.parameterName }}</div>
                </div>
                <div class="right">
                  <div>持续时间{{item.duration}}</div>
                  <div class="bot_t">{{ item.alertValue }} {{ item.unit }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="10">
          <Map :position="location" />
          <div class="eventInfoBox">
            <div class="eventTitBox">事件信息</div>
            <div class="eventListBox">
              <el-descriptions class="margin-top" title="" :column="1" size="mini" border>
                <el-descriptions-item>
                  <template slot="label">事件类型</template>
                  {{ eventObj.parameterName }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">开始时间</template>
                  {{ eventObj.startDate }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">事件来源</template>
                  {{ eventObj.monitorPointName }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">报警值</template>
                  {{ eventObj.alertValue }} {{ eventObj.unit }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">报警状态</template>
                  报警中
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">持续时间</template>
                  {{ eventObj.duration }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="chartBox">
            <div class="chartTitBox">报警趋势</div>
            <div class="chartContent">
              <pressAnalys :barData="barData"></pressAnalys>
            </div>
          </div>
          <div class="siteBox">
            <el-tabs v-model="activeName">
              <el-tab-pane label="站点信息" name="first">
                <div class="siteListBox">
                  <el-descriptions class="margin-top" title="" :column="1" size="small" border>
                    <el-descriptions-item>
                      <template slot="label">监测点名称</template>
                      <!-- {{ hydrantInfo.name == undefined?'':hydrantInfo.name }} -->
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">监测点编号</template>
                      <!-- {{ hydrantInfo.hydrantNo == undefined?'':hydrantInfo.hydrantNo }} -->
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">供应商</template>
                      <!-- {{ hydrantInfo.manufacturer == undefined?'':hydrantInfo.manufacturer }} -->
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">所属组织</template>
                      <!-- {{ hydrantInfo.organization == undefined?'':hydrantInfo.organization }} -->
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">安装时间</template>
                      <!-- {{ hydrantInfo.installDate == undefined?'':hydrantInfo.installDate }} -->
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">监测参数</template>

                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">最近保养</template>

                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">最近巡检</template>

                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">片区负责人</template>

                    </el-descriptions-item>
                  </el-descriptions>
                </div>
              </el-tab-pane>
              <el-tab-pane label="现场照片" name="second">
                <!-- <img @click="handlePictureCardPreview" style="height:150px;width:100%;margin-top:100px;cursor: pointer;" :src="hydrantInfo.imagesPath" />
                <el-dialog :visible.sync="dialogVisible" append-to-body>
                  <img width="100%" :src="hydrantInfo.imagesPath" alt="" />
                </el-dialog> -->
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import Map from "./components/map";
import pressAnalys from "./components/pressAnalys";
import {
  searchHydrantReportRecord, //消防栓报表
} from "@/api/schedule/hydrant/flHydrantAlertEvents/index";
import {
  searchPointInfo,   //监测点详情
  searchAlertEvents, //设备报警事件列表
} from "@/api/schedule/base/flAlertEvents/index";
import {
  getToken
} from "utils/auth";
import {
  getTree, //区域树--小区资料全部
} from "@/api/baseManage/flScheduleCommunity/index";
export default {
  components: {
    Map,
    pressAnalys
  },
  data () {
    return {
      dialogVisible: false,
      value1: "",
      activeName: "first",
      alertEventsList: [],
      active: "background:#EBF5FF",
      current: "",
      eventObj: {},
      hydrantInfo: {},
      location: {
        loca: "",
        type: ""
      },
      barData: {
        xData: [],
        yData: []
      },
      limitConnect: 3,
      timeConnect: 0,
      getTreeList: [], //存放父树
    }
  },
  created () {
    this.getTreeData();
  },
  mounted () {
    this.handleAlertEvents(),
      this.initWebSocket() //wbsocket链接
  },
  methods: {
    handlePictureCardPreview () {
      this.dialogVisible = true;
    },
    // 获取树资料
    getTreeData () {
      getTree().then(res => {
        this.getOrigin(res.data)
      }).catch();
    },
    //递归获取code对应组织
    getOrigin (val) {
      val.map(item => {
        if (item.children) {
          this.getOrigin(item.children)
        } else {
          let obj = {
            address: item.address,
            code: item.code
          }
          this.getTreeList.push(obj)
        }
      })
    },
    initWebSocket () {
      //断开重连机制,尝试发送消息,捕获异常发生时重连
      this.init()
    },
    init () {
      //建立连接对象
      let uName = 'addHydrantAlert'
      let socket = new WebSocket("ws://" + "140.249.214.1:9905" + "/socketServer/" + uName + '?token=' + getToken())
      // let socket = new WebSocket("wss://" + "test.fenglankeji.cn" + "/socketServer/" + uName + '?token=' + getToken())
      socket.onopen = () => {
        console.log('TCP已连接');
      }
      socket.onmessage = (e) => {
        this.handleAlertEvents()
      }
      socket.onclose = () => {
        console.log('服务器已经断开');
        this.reconnect();
      }
    },
    reconnect () {
      let that = this
      if (that.limitConnect > 0) {
        that.limitConnect--;
        that.timeConnect++;
        console.log('第' + that.timeConnect + '次重连');
        setTimeout(function () {
          that.init();
        }, 2000)
      } else {
        console.log('TCP连接已超时');
      }
    },
    handleAlertEvents () {
      let obj = {
      }
      let alertId
      let monitorPointId
      searchAlertEvents(obj).then(reponse => {
        console.log(reponse.data)
        debugger
        let EventsList = this.MsgSort(reponse.data)
        setInterval(() => {
          this.alertEventsList = EventsList.map(item => {
            var nowtime = new Date() //获取当前时间
            var startTime = new Date(item.startDate);  //定义结束时间
            var lefttime = nowtime.getTime() - startTime.getTime()  //距离结束时间的毫秒数
            var leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24))  //计算天数
            var lefth = Math.floor(lefttime / (1000 * 60 * 60) % 24)  //计算小时数
            var leftm = Math.floor(lefttime / (1000 * 60) % 60)  //计算分钟数
            var lefts = Math.floor(lefttime / 1000 % 60)  //计算秒数
            item.duration = leftd + "天" + lefth + "时" + leftm + "分" + lefts + "秒";
            return item
          })
        }, 1000);
        alertId = EventsList[0].alertId
        monitorPointId = EventsList[0].monitorPointId
        this.getEventDetail(alertId)
        this.getHydrantInfo(monitorPointId)
        let startDateStr = "开始时间" + EventsList[0].startDate
        this.barData.xData = [startDateStr, '']
      }).catch(error => {
      })
    },
    //排序
    MsgSort (obj) {
      obj.sort((a, b) => {
        let t1 = new Date(Date.parse(a.startDate.replace(/-/g, "/")))
        let t2 = new Date(Date.parse(b.startDate.replace(/-/g, "/")))
        return t2.getTime() - t1.getTime()
      })
      return obj
    },
    //获取事件详情
    getEventDetail (alertId) {
      let obj = {
        alertId: alertId
      }
      searchAlertEvents(obj).then(reponse => {
        console.log(reponse)
        debugger
        this.eventObj = reponse.data[0]
        setInterval(() => {
          var nowtime = new Date() //获取当前时间
          var startTime = new Date(this.eventObj.startDate);  //定义结束时间
          var lefttime = nowtime.getTime() - startTime.getTime()  //距离结束时间的毫秒数
          var leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24))  //计算天数
          var lefth = Math.floor(lefttime / (1000 * 60 * 60) % 24)  //计算小时数
          var leftm = Math.floor(lefttime / (1000 * 60) % 60)  //计算分钟数
          var lefts = Math.floor(lefttime / 1000 % 60)  //计算秒数
          this.eventObj.duration = leftd + "天" + lefth + "时" + leftm + "分" + lefts + "秒";
        }, 1000);
      }).catch(error => {
      })
    },
    //获取站点信息
    getHydrantInfo (id) {
      let obj = {
        id : id
      }
      searchPointInfo(obj).then(reponse => {
        console.log(reponse.data)
        debugger;
        this.hydrantInfo = reponse.data[0]
        if (reponse.data[0].manufacturer) {
          this.hydrantInfo.manufacturer = reponse.data[0].manufacturer
        } else {
          this.hydrantInfo.manufacturer = ""
        }
        if (reponse.data[0].installDate) {
          this.hydrantInfo.installDate = reponse.data[0].installDate
        } else {
          this.hydrantInfo.installDate = ""
        }
        this.hydrantInfo.imagesPath = "http://test.fenglankeji.cn" + this.hydrantInfo.imagesPath
        this.getTreeList.map(item => {
          if (item.code == this.hydrantInfo.organization) {
            this.hydrantInfo.organization = item.address
          }
        })
        this.location.loca = this.hydrantInfo.location
        this.location.type = this.hydrantInfo.type
        let hydrantId = this.hydrantInfo.id
        this.handleReportRecord(hydrantId)
      }).catch(error => {
      })
    },
    //获取详情
    viewDetail (index, imei, alertId, startDate) {
      this.current = index,
      this.getEventDetail(imei, alertId)
      this.getHydrantInfo(imei)
      let startDateStr = "开始时间" + startDate
      this.barData.xData = [startDateStr, '']
    }
  }
}
</script>
<style scoped>
.alarmManage {
  background: #f2f3f5;
  padding: 20px 30px;
}
.alarmList {
  /* width: 260px; */
  background: #fff;
  padding: 0 10px 0 10px;
  height: 783px;
  overflow-y: auto;
}
.tremTitle {
  height: 33px;
  padding: 7px 0 0 13px;
  border-bottom: 1px solid #e4e4e4;
  font-size: 13px;
  font-weight: 700;
}
.tremBox {
  /* width: 240px; */
  height: 106px;
  border-radius: 2px;
  margin-top: 10px;
  border: 1px solid #e4e4e4;
}
.bot {
  font-size: 13px;
  position: relative;
}
.lef {
  margin: 11px 0 0 14px;
}
.right {
  position: absolute;
  right: 14px;
  top: 0;
}
.bot_t {
  margin-top: 6px;
  color: red;
}
.eventInfoBox {
  height: 335px;
  background: #fff;
  margin-top: 20px;
}
.eventTitBox {
  height: 50px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  padding: 15px 0 0 30px;
  border-bottom: 1px solid #e4e4e4;
}
.eventListBox {
  padding: 15px 30px 15px 30px;
}
.chartBox {
  height: 325px;
  background: #fff;
}
.chartTitBox {
  height: 50px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  padding: 15px 0 0 30px;
  border-bottom: 1px solid #e4e4e4;
}
.chartContent {
  padding-left: 30px;
}
.siteBox {
  height: 436px;
  background: #fff;
  margin-top: 20px;
}
.siteListBox {
  padding: 20px 30px 20px 30px;
}
.el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
  font-weight: 600;
  line-height: 1.8;
}
</style>